Skip to content

Refresh Bricks fonts dropdown on mount via REST endpoint - #231

Merged
jackgranatowski merged 3 commits into
mainfrom
claude/bricks-fonts-dropdown-custom-aOmm0
Jun 5, 2026
Merged

Refresh Bricks fonts dropdown on mount via REST endpoint#231
jackgranatowski merged 3 commits into
mainfrom
claude/bricks-fonts-dropdown-custom-aOmm0

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Previously bricksFonts was a const read once from the PHP bootstrap
(window.slashedApp.bricksFonts), so fonts added after the page loaded
were invisible until a full reload — and CPT fonts could lag by up to
an hour due to the transient cache.

Now FontFamilyField initialises from the bootstrap (no flash) and calls
GET /slashed/v1/bricks-fonts on mount to pick up any fonts added since
the page was served. The bootstrap snapshot is kept as a fallback if the
fetch fails.

https://claude.ai/code/session_012RcH93KjHBJ7ABJJ1yvyrS

Summary by CodeRabbit

  • New Features
    • Font selection now supports live refresh, fetching the latest available fonts from the backend on load. If the refresh fails, the previously cached font list is preserved as a fallback.

@coderabbitai

coderabbitai Bot commented Jun 5, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 46 minutes and 7 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: dc6eeded-3a7d-41e1-bf1b-5aa8300a08e1

📥 Commits

Reviewing files that changed from the base of the PR and between b2dbedd and 97ae18d.

📒 Files selected for processing (3)
  • plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte
  • plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js
  • plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js
📝 Walkthrough

Walkthrough

Bricks font selection now fetches live data from the backend on component mount instead of relying solely on PHP bootstrap. A new fetchBricksFonts() REST client handles nonce authentication and dev-environment fallback. The component uses reactive state and error recovery to preserve bootstrap data if the fetch fails.

Changes

Live Bricks Font Refresh

Layer / File(s) Summary
Font list API client and component integration
plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js, plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte
New fetchBricksFonts() helper authenticates via nonce and calls /bricks-fonts, returning data.fonts and handling dev-environment snapshots. FontFamilyField component updates docstring and imports the function, then converts bricksFonts to reactive state and calls fetchBricksFonts() on mount to refresh the list while keeping bootstrap data as fallback on error.

Sequence Diagram

sequenceDiagram
  participant FontFamilyField as FontFamilyField Component
  participant fetchBricksFonts as fetchBricksFonts()
  participant Backend as /bricks-fonts Endpoint
  
  FontFamilyField->>FontFamilyField: Initialize with bootstrap bricksFonts
  Note over FontFamilyField: onMount triggers
  FontFamilyField->>fetchBricksFonts: call fetchBricksFonts()
  fetchBricksFonts->>Backend: GET /bricks-fonts with nonce
  Backend-->>fetchBricksFonts: data.fonts array
  fetchBricksFonts-->>FontFamilyField: updated fonts
  FontFamilyField->>FontFamilyField: Update reactive state
  
  alt fetch fails
    fetchBricksFonts-->>FontFamilyField: error thrown
    FontFamilyField->>FontFamilyField: Retain bootstrap data
  end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • codeslash-dev/SLASHED#172: Modifies the same Bricks font dropdown flow in FontFamilyField.svelte to refine error handling and UI states around font loading.
  • codeslash-dev/SLASHED#164: Adjusts the backend /bricks-fonts response structure with fallback logic that directly impacts the fonts data returned by the new fetchBricksFonts() call.
  • codeslash-dev/SLASHED#163: Extends the /bricks-fonts REST endpoint to include Google fonts metadata that the live refresh via fetchBricksFonts() will now expose in the dropdown.
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: adding a runtime refresh of the Bricks fonts dropdown via a REST endpoint on component mount, which is the core objective of this PR.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/bricks-fonts-dropdown-custom-aOmm0

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

claude added 2 commits June 5, 2026 11:20
Previously bricksFonts was a const read once from the PHP bootstrap
(window.slashedApp.bricksFonts), so fonts added after the page loaded
were invisible until a full reload — and CPT fonts could lag by up to
an hour due to the transient cache.

Now FontFamilyField initialises from the bootstrap (no flash) and calls
GET /slashed/v1/bricks-fonts on mount to pick up any fonts added since
the page was served. The bootstrap snapshot is kept as a fallback if the
fetch fails.

https://claude.ai/code/session_012RcH93KjHBJ7ABJJ1yvyrS
@jackgranatowski
jackgranatowski force-pushed the claude/bricks-fonts-dropdown-custom-aOmm0 branch from 48992dd to b2dbedd Compare June 5, 2026 11:20

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js (1)

96-99: ⚡ Quick win

Normalize the REST payload shape before returning.

Line 98 currently returns data.fonts ?? []; a non-array value can still leak through and break downstream .some/.find/.length usage. Coerce to an array at the boundary.

Proposed patch
 export async function fetchBricksFonts() {
   const { url, nonce } = meta.rest;
   if (!url) {
     console.info('[slashed-admin] (dev) would GET /bricks-fonts');
-    return meta.bricksFonts;
+    return Array.isArray(meta.bricksFonts) ? meta.bricksFonts : [];
   }
   const res = await fetch(url + '/bricks-fonts', {
     credentials: 'same-origin',
     headers: { 'X-WP-Nonce': nonce },
   });
   if (!res.ok) throw new Error(await res.text() || `HTTP ${res.status}`);
   const data = await res.json();
-  return data.fonts ?? [];
+  return Array.isArray(data?.fonts) ? data.fonts : [];
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js` around
lines 96 - 99, Normalize the REST payload by coercing data.fonts into an array
before returning: in the block that currently does `const data = await
res.json(); return data.fonts ?? [];`, replace that return with logic that
checks data.fonts and returns an array — e.g., if Array.isArray(data.fonts)
return it, if it's a single truthy item wrap it as [data.fonts], otherwise
return [] — so downstream callers using .some/.find/.length always get an array.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte`:
- Around line 61-65: The source inference runs before the async fetchBricksFonts
completes, so if the current font is only present in the refreshed bricksFonts
the UI remains stuck on "manual"; after updating bricksFonts in onMount (and
after the live refresh path around the code at line ~93) call the same function
that infers/sets source (e.g., inferFontSource or the reactive assignment that
computes source from selectedFont and bricksFonts) so the source is recalculated
against the new bricksFonts list; locate the onMount callback, the
fetchBricksFonts call, the bricksFonts assignment, and the place at line ~93 and
invoke the inference routine right after updating bricksFonts.

---

Nitpick comments:
In `@plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js`:
- Around line 96-99: Normalize the REST payload by coercing data.fonts into an
array before returning: in the block that currently does `const data = await
res.json(); return data.fonts ?? [];`, replace that return with logic that
checks data.fonts and returns an array — e.g., if Array.isArray(data.fonts)
return it, if it's a single truthy item wrap it as [data.fonts], otherwise
return [] — so downstream callers using .some/.find/.length always get an array.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b2bc8f25-002d-404a-b198-4e1ccaa2f6ed

📥 Commits

Reviewing files that changed from the base of the PR and between d24b257 and b2dbedd.

📒 Files selected for processing (3)
  • plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte
  • plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js
  • plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js

- Re-run detectSource after the live font refresh so a font that only
  appears in the updated list isn't left stuck on 'manual'.
- Coerce fetchBricksFonts return to Array.isArray guards at both the
  dev-harness and live REST paths.

https://claude.ai/code/session_012RcH93KjHBJ7ABJJ1yvyrS
@jackgranatowski
jackgranatowski merged commit da25138 into main Jun 5, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants